import React from 'react';
import AppLayout from '../layout/AppLayout';
import { getChipsWithPrimary } from '../utils/chipConfig';
import './form.css';
import './scaffold.css';

export default function SimulationConfigNetwork() {
  const chips = getChipsWithPrimary('配置', '/simulation-config-network');

  return (
    <AppLayout active="文件" chips={chips}>
      <div style={{ marginBottom: 24 }}>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <button className="config-subtab">
            <span style={{ fontSize: 20 }}>☰</span>
            <span>通用</span>
          </button>
          <button className="config-subtab">
            <span style={{ fontSize: 20 }}>📄</span>
            <span>记录</span>
          </button>
          <button className="config-subtab">
            <span style={{ fontSize: 20 }}>💾</span>
            <span>保存配置</span>
          </button>
          <button className="config-subtab active">
            <span style={{ fontSize: 20 }}>🕸️</span>
            <span>网络属性</span>
          </button>
        </div>
      </div>

      <div className="form-2col">
        <div className="card">
          <div className="field">
            <label>缩放因子</label>
            <div className="input">1</div>
          </div>
          <div className="field">
            <label>默认连接权重</label>
            <div className="input">1</div>
          </div>
          <div className="field">
            <label>默认延迟</label>
            <div className="input">1</div>
          </div>
          <div className="field">
            <label>连接权重缩放因子</label>
            <div className="input">1</div>
          </div>
          <div className="field">
            <label>NetStims (网络刺激) 的连接权重缩放因子</label>
            <div className="input">1</div>
          </div>
          <div className="field">
            <label>为每个细胞模型添加新的连接权重缩放因子</label>
            <div className="row">
              <div className="input" style={{ flex: 1 }}></div>
              <button className="btn-circle">＋</button>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="field">
            <label>X 维度</label>
            <div className="input">100</div>
          </div>
          <div className="field">
            <label>Y 维度</label>
            <div className="input">1</div>
          </div>
          <div className="field">
            <label>Z 维度</label>
            <div className="input">1</div>
          </div>
          <div className="field">
            <label>传导速度</label>
            <div className="input">1</div>
          </div>
          <div className="field">
            <label>网络形状</label>
            <div className="input" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span></span>
              <span>▾</span>
            </div>
          </div>
          <div className="field">
            <label>随机旋转</label>
            <div className="input">false</div>
          </div>
        </div>
      </div>
    </AppLayout>
  )
}

